<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="大题名称" prop="bigQuestion">
        <el-input
          v-model="queryParams.bigQuestion"
          placeholder="请输入大题名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="小题名称" prop="smallTopic">
        <el-input
          v-model="queryParams.smallTopic"
          placeholder="请输入小题名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="题目类型" prop="type">
        <el-select
          v-model="queryParams.type"
          placeholder="请选择题目类型"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in typeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="选项数量" prop="optionCount">
        <el-input
          v-model.number="queryParams.optionCount"
          placeholder="请输入选项数量"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      <el-form-item label="答案(选择题/判断题可能会有)" prop="answer">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.answer"-->
      <!--          placeholder="请输入答案(选择题/判断题可能会有)"-->
      <!--          clearable-->
      <!--          size="small"-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="分数" prop="fraction">
        <el-input
          v-model.number="queryParams.fraction"
          placeholder="请输入分数"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="一级知识点" prop="knowledgeA">
        <el-input
          v-model="queryParams.knowledgeA"
          placeholder="请输入一级知识点"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="二级知识点" prop="knowledgeB">
        <el-input
          v-model="queryParams.knowledgeB"
          placeholder="请输入二级知识点"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="考察知识点" prop="investigateKnow">
        <el-input
          v-model="queryParams.investigateKnow"
          placeholder="请输入考察知识点"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="认知分类" prop="categorization">
        <el-input
          v-model="queryParams.categorization"
          placeholder="请输入认知分类"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="难易程度" prop="difficulty">
        <el-input
          v-model.number="queryParams.difficulty"
          placeholder="请输入难易程度"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="内容相关性" prop="correlation">
        <el-input
          v-model="queryParams.correlation"
          placeholder="请输入内容相关性"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="模板分类" prop="formwork">
        <el-input
          v-model="queryParams.formwork"
          placeholder="请输入模板分类"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          clearable
          size="small"
          v-model="queryParams.createTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择创建时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="创建人" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入创建人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置
        </el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['topic:questionbank:add']"
        >新增
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['topic:questionbank:edit']"
        >修改
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['topic:questionbank:remove']"
        >删除
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['topic:questionbank:export']"
        >导出
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['topic:questionbank:import']"
        >旧版试题导入
        </el-button
        >
      </el-col>


      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="hjHandleImport"
        >环境试题导入
        </el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="questionbankList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <!--      <el-table-column label="创建人" align="center" prop="id" />-->
      <el-table-column
        label="大题名称"
        align="center"
        :show-overflow-tooltip="true"
        prop="bigQuestion"
      />
      <el-table-column
        label="小题名称"
        align="center"
        :show-overflow-tooltip="true"
        prop="smallTopic"
      />
      <el-table-column
        label="题目类型"
        align="center"
        prop="type"
        :formatter="typeFormat"
      />
      <el-table-column label="选项数量" align="center" prop="optionCount"/>
      <el-table-column
        label="答案(选择题/判断题可能会有)"
        :show-overflow-tooltip="true"
        align="center"
        prop="answer"
      />
      <el-table-column label="分数" align="center" prop="fraction"/>
      <el-table-column
        label="一级知识点"
        :show-overflow-tooltip="true"
        align="center"
        prop="knowledgeA"
      />
      <el-table-column
        label="二级知识点"
        :show-overflow-tooltip="true"
        align="center"
        prop="knowledgeB"
      />
      <el-table-column
        label="考察知识点"
        :show-overflow-tooltip="true"
        align="center"
        prop="investigateKnow"
      />
      <el-table-column
        label="认知分类"
        :show-overflow-tooltip="true"
        align="center"
        prop="categorization"
        :formatter="categorizationFormat"
      />
      <el-table-column label="难易程度" align="center" prop="difficulty"/>
      <el-table-column
        label="内容相关性"
        :show-overflow-tooltip="true"
        align="center"
        prop="correlation"
      />
      <el-table-column label="模板分类" align="center" prop="formwork"/>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="createBy"/>
      <el-table-column
        label="修改时间"
        align="center"
        prop="updateTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改人" align="center" prop="updateBy"/>
      <el-table-column
        label="操作"
        align="center"
        width="150px"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['topic:questionbank:edit']"
          >修改
          </el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['topic:questionbank:remove']"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改基本题库管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="大题名称" prop="bigQuestion">
          <el-input v-model="form.bigQuestion" placeholder="请输入大题名称"/>
        </el-form-item>
        <el-form-item label="小题名称" prop="smallTopic">
          <el-input v-model="form.smallTopic" placeholder="请输入小题名称"/>
        </el-form-item>
        <el-form-item label="题目类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择题目类型">
            <el-option
              v-for="dict in typeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项数量" prop="optionCount">
          <el-input
            v-model.number="form.optionCount"
            placeholder="请输入选项数量"
          />
        </el-form-item>
        <el-form-item label="答案(选择题/判断题可能会有)" prop="answer">
          <el-input
            v-model="form.answer"
            placeholder="请输入答案(选择题/判断题可能会有)"
          />
        </el-form-item>
        <el-form-item label="分数" prop="fraction">
          <el-input v-model.number="form.fraction" placeholder="请输入分数"/>
        </el-form-item>
        <el-form-item label="一级知识点" prop="knowledgeA">
          <el-input v-model="form.knowledgeA" placeholder="请输入一级知识点"/>
        </el-form-item>
        <el-form-item label="二级知识点" prop="knowledgeB">
          <el-input v-model="form.knowledgeB" placeholder="请输入二级知识点"/>
        </el-form-item>
        <el-form-item label="考察知识点" prop="investigateKnow">
          <el-input
            v-model="form.investigateKnow"
            placeholder="请输入考察知识点"
          />
        </el-form-item>
        <el-form-item label="认知分类" prop="categorization">
          <el-input
            v-model="form.categorization"
            placeholder="请输入认知分类"
          />
        </el-form-item>
        <el-form-item label="难易程度" prop="difficulty">
          <el-input
            v-model.number="form.difficulty"
            placeholder="请输入难易程度"
          />
        </el-form-item>
        <el-form-item label="内容相关性" prop="correlation">
          <el-input v-model="form.correlation" placeholder="请输入内容相关性"/>
        </el-form-item>
        <el-form-item label="模板分类" prop="formwork">
          <el-input v-model="form.formwork" placeholder="请输入模板分类"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport"/>
            是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <div v-show="downmsg != ''" style="margin-top: 10px">
            <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate()"
            >下载返回结果
            </el-link
            >
          </div>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>







    <!-- 环境导入对话框 -->
    <el-dialog
      :title="hjUpload.title"
      :visible.sync="hjUpload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="hjUpload.headers"
        :action="hjUpload.url + '?updateSupport=' + hjUpload.updateSupport"
        :disabled="hjUpload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="hjUpload.updateSupport"/>
            是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <div v-show="downmsg != ''" style="margin-top: 10px">
            <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate()"
            >下载返回结果
            </el-link
            >
          </div>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="hjUpload.open = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    listQuestionbank,
    getQuestionbank,
    delQuestionbank,
    addQuestionbank,
    updateQuestionbank,
    exportQuestionbank,
  } from "@/api/topic/questionbank";
  import {getToken} from "@/utils/auth";

  export default {
    name: "Questionbank",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 基本题库管理表格数据
        questionbankList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 题目类型字典
        typeOptions: [],
        // 认知分类字典
        categorizationOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          bigQuestion: null,
          smallTopic: null,
          type: null,
          optionCount: null,
          answer: null,
          fraction: null,
          knowledgeA: null,
          knowledgeB: null,
          investigateKnow: null,
          categorization: null,
          difficulty: null,
          correlation: null,
          formwork: null,
          createTime: null,
          createBy: null,
        },
        //用户下载的东西
        downmsg: "",
        // 用户导入参数
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: {Authorization: "Bearer " + getToken()},
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/demo/excel/importData",
        },
        hjUpload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: {Authorization: "Bearer " + getToken()},
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/demo/excel/hjImportExcel",
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
      };
    },
    created() {
      this.getList();
      this.getDicts("question_type").then((response) => {
        this.typeOptions = response.data;
      });
      this.getDicts("topic_categorization").then((response) => {
        this.categorizationOptions = response.data;
      });
    },
    methods: {
      /** 查询基本题库管理列表 */
      getList() {
        this.loading = true;
        listQuestionbank(this.queryParams).then((response) => {
          this.questionbankList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 题目类型字典翻译
      typeFormat(row, column) {
        console.log("typeOptions: ", this.typeOptions);
        return this.selectDictLabel(this.typeOptions, row.type);
      },
      // 认知分类字典翻译
      categorizationFormat(row, column) {
        return this.selectDictLabel(
          this.categorizationOptions,
          row.categorization
        );
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          parentId: null,
          personId: null,
          bigQuestion: null,
          smallTopic: null,
          type: null,
          optionCount: null,
          answer: null,
          fraction: null,
          knowledgeA: null,
          knowledgeB: null,
          investigateKnow: null,
          categorization: null,
          difficulty: null,
          correlation: null,
          formwork: null,
          createTime: null,
          createBy: null,
          updateTime: null,
          updateBy: null,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加基本题库管理";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids;
        getQuestionbank(id).then((response) => {
          this.form = response.data;
          this.open = true;
          this.title = "修改基本题库管理";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.id != null) {
              updateQuestionbank(this.form).then((response) => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addQuestionbank(this.form).then((response) => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm(
          '是否确认删除基本题库管理编号为"' + ids + '"的数据项?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return delQuestionbank(ids);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          })
          .catch(() => {
          });
      },
      /** 导入按钮操作 */
      handleImport() {
        this.upload.title = "用户导入";
        this.upload.open = true;
      },
      hjHandleImport() {
        this.hjUpload.title = "环境试题导入";
        this.hjUpload.open = true;
      },
      /** 下载模板操作 */
      importTemplate() {
        // importTemplate().then(response => {
        // this.download(response.msg);
        this.download(this.downmsg);
        this.upload.open = false;
        this.downmsg = "";
        // });
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        // this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.downmsg = response.msg;
        this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
        this.getList();
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm("是否确认导出所有基本题库管理数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.exportLoading = true;
            return exportQuestionbank(queryParams);
          })
          .then((response) => {
            this.download(response.msg);
            this.exportLoading = false;
          })
          .catch(() => {
          });
      },
    },
  };
</script>
